<!--{template common/container/pc/header_start}-->
<link rel="stylesheet" href="{MOD_PATH}/template/pc/assets/password.css?{VERHASH}">

<!--{template common/container/pc/header_end}-->
<div id="dzzoffice">
	<div id="wrapper_div" style="width: 100%;height:100%;  position: absolute; top: 0px; left: 0px; margin: 0px; padding: 0px; overflow: hidden;z-index:0;  font-size: 0px; background:{eval echo $_G['setting']['loginset']['bcolor']?$_G['setting']['loginset']['bcolor']:'#76838f';};">
		<img src="{eval echo $_G['setting']['loginset']['img']?$_G['setting']['loginset']['img']:'user/login/template/pc/assets/login.jpg';}" name="imgbg" id="imgbg" style="right: 0px; bottom: 0px; top: 0px; left: 0px; z-index:1;margin:0;padding:0;overflow:hidden; position: absolute;" @load="handleImgLoad(this)">
		<iframe v-if="loginset.url"  id="wrapper_frame" name="wrapper_frame" src="$_G['setting']['loginset']['url']" frameborder="0" marginheight="0" marginwidth="0" width="100%" height="100%" allowtransparency="true" style="z-index:2;position:absolute;width:100%;height:100%;background:url(dzz/images/b.gif);"></iframe>
	</div>
	<div class="mainContainer" id="main_message">
	<div class="mask"></div>	
	<div class="modal-content">
		<el-container>

				<el-tooltip content="{lang theme_color}" placement="bottom">
					<el-button
							text
							class="themebtn"
							:icon="DocumentThemeColor=='light'?'Sunny':'Moon'"
							style="font-size: var(--el-font-size-extra-large);"
							circle
							size="large"
							@click="DocumentThemeChange">
					</el-button>
				</el-tooltip>


			<el-main class="share-body">
				<div class="share-body-wrapper">
					<div class="share-user-wrapper">
						<el-avatar :size="100" alt="$shareData['username']">
							{eval echo avatar_block($sharedata['uid']);}
						</el-avatar>
						<el-text size="large" tag="div" title="{lang username}">$sharedata['username']</el-text>
					</div>
					<div class="share-title">
						<el-text size="large" title="{lang share_title}">$sharedata['title']</el-text>
					</div>
					<el-form :model="ruleForm" :size="large" label-width="0" @submit.native.prevent="handleSubmit">

						<el-form-item >
						<el-input size="large" v-model="ruleForm.password" placeholder="{lang share_password}" type="text"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button class="btn-block" size="large" type="primary" :loading="btnloading" @click="handleSubmit">{lang password_share_submit}</el-button>
						</el-form-item>

					</el-form>
				</div>

			</el-main>
			<el-footer>
				<div class="copyright-container">
					<footer class="page-copyright page-copyright-inverse">
						<p>Powered By <a href="https://www.oaooa.com" target="_blank" >Pichome</a>&nbsp;V{eval echo CORE_VERSION}</p>
						<!--{if $_G[setting][sitebeian]}-->
						<p><a href="https://beian.miit.gov.cn/" target="_blank">$_G[setting][sitebeian]</a></p>
						<!--{/if}-->
					</footer>
				</div>

			</el-footer>
		</el-container>

	</div>
</div>

<script type="text/javascript">
	const { createApp, reactive, toRefs, toRef, ref, onMounted, nextTick, watch } = Vue;
	const dzzoffice = createApp({
		data() {
			let self = this;
			
			return {
				DocumentThemeColor:'',
				btnloading:false,
				loginset:{
					title:"{$_G[setting]['loginset']['title']}",
					subtitle:"{$_G[setting]['loginset']['subtitle']}",
					url:"{$_G[setting]['loginset']['url']}",
					bcolor:"{$_G[setting]['loginset']['bcolor']}",
					img:"{$_G[setting]['loginset']['img']}",
				},
				bgimg: {
					width:0,
					height:0
				},
				ruleForm: {
					sid:'{$_GET['sid']}',
					password:'',

				}

			}
		},
		watch:{
			DocumentThemeColor:{
				handler(newval){
					document.querySelector('html').className = newval
				},
				deep:true,
				// immediate:true
			}
		},
		created() {
			 //主题颜色
			let theme = localStorage.getItem('theme');
			if(theme){
				this.DocumentThemeColor=theme;
			}else{
				this.DocumentThemeColor = 'light'
			}
			
		},
		methods: {
			DocumentThemeChange(){
				if(this.DocumentThemeColor === 'light'){
					this.DocumentThemeColor ='dark';
					localStorage.setItem('theme','dark');
				}else{
					this.DocumentThemeColor ='light';
					localStorage.setItem('theme','light');
				}
			},
			handleImgLoad(){
				let img=document.getElementById('imgbg');
			
				this.bgimg.width=img.width;
				this.bgimg.height=img.height;
				this.setImageSize();
			},
				
			setImageSize(){
				let width=this.bgimg.width;
				let height=this.bgimg.height;
				var clientWidth=document.documentElement.clientWidth;
				var clientHeight=document.documentElement.clientHeight;
				var r0=clientWidth/clientHeight;
				var r1=width/height;
				if(r0>r1){//width充满
					w=clientWidth;
					h=w*(height/width);
				}else{
					h=clientHeight;
					w=h*(width/height);
				}
				if(document.getElementById('imgbg')){
				  document.getElementById('imgbg').style.width=w+'px';
				  document.getElementById('imgbg').style.height=h+'px';
				}
			},


			async handleSubmit(){
				var self = this;

				let params = {
					passwordsubmit:true,
					formhash:'{FORMHASH}',
					sid: self.ruleForm.sid,
					password:self.ruleForm.password,
				}

				self.btnloading = true;
				const {data: res} = await axios.post('index.php?mod=shares&op=ajax&do=checkpassword',params);
				if(res.success){
					window.location.href=res.viewurl;
				}else{
					self.btnloading = false;
					self.$message.error(res.error );
				}

			}
		},
		mounted() {
			window.onresize = () =>{
				this.setImageSize();
			}
		}
	});
	dzzoffice.use(ElementPlus, {
		locale: {$_G['language_list'][$_G['language']]['elementflagCamel']},
	});
	for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
		dzzoffice.component(key, component)
	}
	
	// 屏蔽警告信息
	dzzoffice.config.warnHandler = function(){return null};
	dzzoffice.mount('#dzzoffice');
</script>

<!--{template common/container/pc/footer}-->
